
<template>
    <div class="crud">
        <div class="col-1">
            <!--<img :src="" alt=""/>-->
        </div>
  
        <div class="col-2">
            <h3>Name: rrr</h3>
            
            <el-select v-model="value" placeholder="Select" style="width: 100px" :teleported="false">
                <el-option
                  v-for="item in opt"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
            </el-select>
            
            <!--
            <select @change="update">
                <option
                    v-for="col in ['red','green']"
                    :value="col" :key="col" 
                    :selected="col == color ? 'selected' : ''"
                    >{{ col }}
                </option>
            </select>
            <button @click="del">Delete</button>
            -->
            
            <el-button type="danger" @click="" style="margin-left:5px">Delete</el-button>
           
            
        </div>
    </div>
</template>
<!--
<script>
/*
function properCaseName(str){ 
    return str.charAt(0).toUpperCase()+str.slice(1);
};
*/
//vue2 与vue3 的混写模式
import { ref } from 'vue';
export default {
    props:['id','color','name'],
    setup(){
        const value = ref('')
        const color = [{
            value:'red',
            label:'red'
            },{
                value:'green',
                label:'green'

            }];
            
        /*
        return {
            value
        }
        */
    },

    
    
    /*
    props:{
        id:Number,
        color:String,
        name:String
    },
   */ 
    computed:{
        image(){
            return `/images/${this.color}.png`;
            
        }
    },
    methods:{
        update(val){
            this.$emit('update',this.id,val.target.selectedOptions[0].value);
        },
        del(){
            this.$emit('delete',this.id);
        }
    },
    /* vue3 删除了filters功能 可使用Computed Properties 
       和在Methods中自定义方法
    filters:{
        properCase(string){
            return string.charAt(0).toUpperCase()+string.slice(1);
        }
    }
    */
   
}

import { computed } from 'vue';
//Computed Properties方法如下：
   const properCaseName = computed(() => {
        return (str) => {
            return str.charAt(0).toUpperCase()+str.slice(1);
        };
   });
   
</script>
-->
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref('')

const opt = [
  {
    value: 'red',
    label: 'red',
  },
  {
    value: 'green',
    label: 'green',
    disabled: true,
  }
]

</script>



<style>
    .crud {
        display: flex;
        margin: 1em 1em 1em 0;
        border: 1px solid #d1d1d1;
        padding: 1em;
        max-width: 350px;
        background-color: white;
    }

    .crud img {
        height: 70px;
    }

    .col-2 {
        margin-left: 4em;
        width: 100%;
    }

    .col-2 > h3 {
        margin: 0.5em 0;
    }
</style>